<template>
  <div class="scenic-detail">
    <Header title="景区详情"></Header>
    <!-- 轮播 -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="@/assets/temporary/scenic-detail-banner1.png" alt />
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/temporary/scenic-detail-banner1.png" alt />
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/temporary/scenic-detail-banner1.png" alt />
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/temporary/scenic-detail-banner1.png" alt />
      </van-swipe-item>
    </van-swipe>
    <!-- 到这里去 -->
    <router-link to class="to-here">
      <img src="@/assets/images/to-here.png" alt />
    </router-link>
    <div class="detail-title-info">
      <h3>嵩山国家风景名胜区</h3>
      <p>57.4km | 登封市太室路与滨河路交叉口北侧</p>
      <p>
        <van-icon name="star" color="#FF0000" />
        <van-icon name="star" color="#FF0000" />
        <van-icon name="star" color="#FF0000" />
        <van-icon name="star" color="#FF0000" />
        <van-icon name="star" color="#ccc" />
        <span>5A景区</span>
        <span>8:00-17:30开放</span>
      </p>
      <p>联系电话：0371-62746999</p>
    </div>
    <p class="detail-title-bottom">
      <span>实时客流:<em>86920</em></span>
      <span>最佳客流:<em>10000</em></span>
      <span>最大客流:<em>15000</em></span>
    </p>
    <div class="detail-content-box">
      <van-tabs v-model="active" scrollspy sticky title-active-color="#0FD2B2" color="#0FD2B2" line-height="2px" > 
      <van-tab title="景区概况">
        <div class="detail-content-title">景区概况</div>
         <div class="detail-content-gk">
          <p class>
            古老的嵩山起始于36亿年前，堪称万山之祖，它拥有“五代同堂”的地质奇观，被誉为“天然地质博物馆”、“地学百科全书”。
            <router-link to>查看全部></router-link>
          </p>
          <div>
            <b>当前天气</b>
            <img src="@/assets/images/sunny.png" alt />
            <span>20/12℃ | 空气质量</span>
            <em>良</em>
          </div>
          <div>
            <b>建议游玩</b>
            <span>1-2天</span>
          </div>
          <div>
            <b>最佳季节</b>
            <span>3月-5月和9月-11月</span>
          </div>
        </div>
      </van-tab>
      <van-tab title="购票">
        <div class="detail-content-title">购票</div>
        <div class="detail-content-gp">
          <div>
            <p>少林寺门票成人票</p>
            <p>
              <b>￥<i>80</i></b>
              <router-link to>在线订票</router-link>
            </p>
          </div>
          <div>
            <p>少林寺门票+往返电瓶车票成人票</p>
            <p>
              <b>￥<i>105</i></b>
              <router-link to>在线订票</router-link>
            </p>
          </div>
        </div>
      </van-tab>
       <van-tab title="交通方式">
         <div class="detail-content-title">交通方式</div>
        <div class="detail-content-jt">
          <div>
            <b>市内公交</b>
            <p>在登封市区内，乘 1、2、3、6、8 路公交车可到达少林景区。</p>
          </div>
          <div>
            <b>公共汽车</b>
            <p>坐车至登封市内的汽车站，如果所在地区没有直达登封的汽车可以先坐车至郑州汽车站或者洛 阳汽车站，然后再转车前往登封。</p>
          </div>
        </div>
      </van-tab>
       <van-tab title="用户评价(6846)">
         <div class="detail-content-title">用户评价</div>
        <div class="detail-content-pj">
          <div class="content-pj-label">
            <span :class="{active:isActive==true}" @click="getLabel()">家庭亲子 673</span>
            <span>人气旺 615</span>
            <span>环境优雅 367</span>
            <span>地方赞 152</span>
            <span>停车方便 108</span>
            <span>高大山 41</span>
          </div>
          <div class="content-pj-list">
            <div class="pj-list-item">
              <div class="item-title">
                <div class="img-box">
                  <img src="@/assets/temporary/pj-img.png" alt />
                </div>
                <div class="right-box">
                  <p class="nick-box">春天也有萝卜</p>
                  <p class="time-box">
                    <van-icon name="star" color="#FF0000" />
                    <van-icon name="star" color="#FF0000" />
                    <van-icon name="star" color="#FF0000" />
                    <van-icon name="star" color="#FF0000" />
                    <van-icon name="star" color="#cccccc" />
                    <span>2019-08-25</span>
                  </p>
                </div>
              </div>
              <div class="item-content">嵩山少室山景色超出预期，个人感觉五岳中仅次于华山。可惜下大雨没走完全程，以后再来补上，再把太室山也爬了</div>
              <div class="item-img">
                <div class="img-box">
                  <img @click="getPreview" src="@/assets/temporary/pj1.png" alt />
                </div>
                <div class="img-box">
                  <img src="@/assets/temporary/pj2.png" alt />
                </div>
                <div class="img-box">
                  <img src="@/assets/temporary/pj3.png" alt />
                </div>
                <div class="img-box">
                  <img src="@/assets/temporary/pj4.png" alt />
                </div>
                <div class="img-box">
                  <img src="@/assets/temporary/pj5.png" alt />
                </div>
              </div>
            </div>
            <div class="pj-list-item">
              <div class="item-title">
                <div class="img-box">
                  <img src="@/assets/temporary/pj-img.png" alt />
                </div>
                <div class="right-box">
                  <p class="nick-box">春天也有萝卜</p>
                  <p class="time-box">
                    <van-icon name="star" color="#FF0000" />
                    <van-icon name="star" color="#FF0000" />
                    <van-icon name="star" color="#FF0000" />
                    <van-icon name="star" color="#FF0000" />
                    <van-icon name="star" color="#cccccc" />
                    <span>2019-08-25</span>
                  </p>
                </div>
              </div>
              <div class="item-content">嵩山少室山景色超出预期，个人感觉五岳中仅次于华山。可惜下大雨没走完全程，以后再来补上，再把太室山也爬了</div>
              <div class="item-img">
                <div class="img-box">
                  <img src="@/assets/temporary/pj1.png" alt />
                </div>
                <div class="img-box">
                  <img src="@/assets/temporary/pj2.png" alt />
                </div>
                <div class="img-box">
                  <img src="@/assets/temporary/pj3.png" alt />
                </div>
                <div class="img-box">
                  <img src="@/assets/temporary/pj4.png" alt />
                </div>
                <div class="img-box">
                  <img src="@/assets/temporary/pj5.png" alt />
                </div>
              </div>
            </div>
            <div class="pj-list-item">
              <div class="item-title">
                <div class="img-box">
                  <img src="@/assets/temporary/pj-img.png" alt />
                </div>
                <div class="right-box">
                  <p class="nick-box">春天也有萝卜</p>
                  <p class="time-box">
                    <van-icon name="star" color="#FF0000" />
                    <van-icon name="star" color="#FF0000" />
                    <van-icon name="star" color="#FF0000" />
                    <van-icon name="star" color="#FF0000" />
                    <van-icon name="star" color="#cccccc" />
                    <span>2019-08-25</span>
                  </p>
                </div>
              </div>
              <div class="item-content">嵩山少室山景色超出预期，个人感觉五岳中仅次于华山。可惜下大雨没走完全程，以后再来补上，再把太室山也爬了</div>
              <div class="item-img">
                <div class="img-box">
                  <img src="@/assets/temporary/pj1.png" alt />
                </div>
                <div class="img-box">
                  <img src="@/assets/temporary/pj2.png" alt />
                </div>
                <div class="img-box">
                  <img src="@/assets/temporary/pj3.png" alt />
                </div>
                <div class="img-box">
                  <img src="@/assets/temporary/pj4.png" alt />
                </div>
                <div class="img-box">
                  <img src="@/assets/temporary/pj5.png" alt />
                </div>
              </div>
            </div>
          </div>
          <van-image-preview v-model="show" :images="images"></van-image-preview>
        </div>
      </van-tab>
    </van-tabs>
    </div>
    <Nav></Nav>
  </div>
</template>

<script>
import Header from "@/components/Header/Header.vue";
import Nav from "@/components/Nav/Nav.vue";
import photo from "@/assets/temporary/pj-img.png"
import pj1 from "@/assets/temporary/pj1.png";
import pj2 from "@/assets/temporary/pj2.png";
import pj3 from "@/assets/temporary/pj3.png";
import pj4 from "@/assets/temporary/pj4.png";
import pj5 from "@/assets/temporary/pj5.png";
export default {
  name: "scenicDetail",
  components: { Header, Nav },
  data() {
    return {
      active:0,
      // tab栏默认选中
      isClick: 0,
      //   评论标签是否选中
      isActive: false,
      show: false,
      index: 0,
      images: [pj1, pj2, pj3, pj4, pj5],
      list:{
        gk:{title:'景区概况',introduce:'古老的嵩山起始于36亿年前，堪称万山之祖，它拥有“五代同堂”的地质奇观，被誉为“天然地质博物馆”、“地学百科全书”。',adviceTime:'1-2天',bestSeason:'3月-5月和9月-11月'},
        gp:{title:'购票',ticketList:[{name:'少林寺门票成人票',price:'80'},{name:'少林寺门票+往返电瓶车票成人票',price:'105'},]},
        jt:{title:'交通方式',trafficList:[{name:'市内公交',content:'在登封市区内，乘 1、2、3、6、8 路公交车可到达少林景区。'},{name:'公共汽车',content:'坐车至登封市内的汽车站，如果所在地区没有直达登封的汽车可以先坐车至郑州汽车站或者洛 阳汽车站，然后再转车前往登封。'}]},
        pj:{tagList:[{name:'家庭亲子',num:673},{name:'人气旺',num:615},{name:'环境优雅',num:367},{name:'地方赞',num:152},{name:'停车方便',num:108},{name:'高大上',num:41}],list:[{photo:photo,nickname:'春天也有萝卜',time:'2019-08-25',content:'嵩山少室山景色超出预期，个人感觉五岳中仅次于华山。可惜下大雨没走完全程，以后再来补上，再把太室山也爬了',imgList:[pj1,pj2,pj3,pj4,pj5]},{photo:photo,nickname:'春天也有萝卜',time:'2019-08-25',content:'嵩山少室山景色超出预期，个人感觉五岳中仅次于华山。可惜下大雨没走完全程，以后再来补上，再把太室山也爬了',imgList:[pj1,pj2,pj3,pj4,pj5]},{photo:photo,nickname:'春天也有萝卜',time:'2019-08-25',content:'嵩山少室山景色超出预期，个人感觉五岳中仅次于华山。可惜下大雨没走完全程，以后再来补上，再把太室山也爬了',imgList:[pj1,pj2,pj3,pj4,pj5]}]}
      }
    };
  },
  methods: {
    getLabel() {
      this.isActive = true;
    },
    getPreview(index) {
      this.show = true;
    },
   
  }
};
</script>

<style lang="less" scope>
.scenic-detail {
  position: relative;
  height: 100vh;
  padding-top: 11.73333333vw;
  padding-bottom: 13.06666667vw;
}

// 到这里去
.to-here {
  position: fixed;
  top: 439/7.5vw;
  right: 37/7.5vw;
  width: 139/7.5vw;
  z-index: 99;
  > img {
    display: block;
    width: 100%;
  }
}
.detail-title-info {
  padding: 30/7.5vw 30/7.5vw 0;
  background-color: #fff;
  > h3 {
    font-size: 36/7.5vw;
    line-height: 72/7.5vw;
  }
  > p {
    font-size: 28/7.5vw;
    color: #666666;
    line-height: 72/7.5vw;
    i {
      margin: 0 5/7.5vw;
    }
    > span {
      margin-left: 26/7.5vw;
    }
  }
}
.detail-title-bottom {
  font-size: 28/7.5vw;
  color: #666666;
  line-height: 72/7.5vw;
  padding: 0 30/7.5vw;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f2f2f2;
  span {
    display: inline-block;
    margin: 0;
    em {
      color: #0fd2b2;
    }
  }
}

// 内容部分
.detail-content-box {
  margin-top: 20/7.5vw;
  padding: 20/7.54vw 0 98/7.5vw;
  background: #fff;
  .detail-content-header {
    width: 100%;
    height: 94/7.5vw;
    font-size: 32/7.5vw;
    background-color: #fff;
    transition: all 0.1s;
    &.active {
      position: fixed;
      top: 88/7.5vw;
      left: 0;
      padding: 0 20/7.5vw;
      z-index: 999;
    }
    .content-headerList {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
    }
    span {
      padding: 10/7.5vw 5/7.5vw;

      &.active {
        border-bottom: 4/7.5vw solid #0fd2b2;
        color: #0fd2b2;
        font-weight: bold;
      }
    }
  }
  .detail-content-title {
    font-size: 36/7.5vw;
    color: #666666;
    font-weight: bold;
    padding-left: 15/7.5vw;
    border-left: 6/7.5vw solid #0fd2b2;
    line-height: 36/7.5vw;
    margin: 30/7.5vw 0;
  }
  .detail-content-gk {
    > p {
      position: relative;
      font-size: 28/7.5vw;
      color: #666666;
      padding-bottom: 20/7.5vw;
      border-bottom: 1px solid #f2f2f2;
      line-height: 45/7.5vw;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      > a {
        position: absolute;
        right: 0;
        bottom: 20/7.5vw;
        color: #0fd2b2;
        font-size: 24/7.5vw;
      }
    }
    > div {
      font-size: 28/7.5vw;
      color: #666666;
      line-height: 45/7.5vw;
      border-bottom: 1px solid #f2f2f2;
      padding: 15/7.5vw 0;
      b {
        font-size: 32/7.5vw;
        color: #333;
        margin-right: 38/7.5vw;
      }
      em {
        color: #0fd2b2;
        padding: 0 20/7.5vw;
      }
      img {
        width: 34/7.5vw;
        vertical-align: middle;
        margin-right: 15/7.5vw;
      }
    }
  }
  .detail-content-gp {
    > div {
      border-bottom: 1px solid #f2f2f2;
      padding-top: 20/7.5vw;
      p {
        display: flex;
        justify-content: space-between;
        font-size: 32/7.5vw;
        color: #333;
        b {
          font-size: 36/7.5vw;
          color: #f76454;
          i {
            font-family: DINCond-Black;
            font-size: 52/7.5vw;
          }
        }
        a {
          display: block;
          width: 170/7.5vw;
          height: 68/7.5vw;
          border-radius: 34/7.5vw;
          background-color: #f76454;
          color: #fff;
          line-height: 68/7.5vw;
          text-align: center;
        }
      }
    }
  }
  .detail-content-jt {
    b {
      color: #333;
      padding: 10/7.5vw 0;
      line-height: 72/7.5vw;
      font-weight: 700;
    }
    p {
      font-size: 28/7.5vw;
      line-height: 45/7.5vw;
    }
  }
  .detail-content-pj {
    .content-pj-label {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      > span {
        width: 220/7.5vw;
        height: 48/7.5vw;
        line-height: 48/7.5vw;
        text-align: center;
        margin-bottom: 20/7.5vw;
        border-radius: 44/7.5vw;
        background-color: #f2f2f2;
        font-size: 28/7.5vw;
        color: #999;
        box-sizing: border-box;
        &.active {
          background-color: #f2f2f2;
          border: 1px solid #cb955c;
          color: #cb955c;
        }
      }
    }
    .content-pj-list {
      .pj-list-item {
        margin-bottom: 40/7.5vw;
        .item-title {
          display: flex;
          align-items: center;
          .img-box {
            width: 80/7.5vw;
            height: 80/7.5vw;
            margin-right: 20/7.5vw;
            border-radius: 50%;
            overflow: hidden;
            > img {
              display: block;
              width: 100%;
            }
          }
          .nick-box {
            font-size: 32/7.5vw;
          }
          .time-box {
            font-size: 28/7.5vw;
            i {
              margin-right: 5/7.5vw;
            }
            span {
              margin-left: 20/7.5vw;
            }
          }
        }
        .item-content {
          font-size: 28/7.5vw;
          color: #666666;
          line-height: 45/7.5vw;
        }
        .item-img {
          margin-top: 20/7.5vw;
          display: flex;
          flex-wrap: wrap;
          .img-box {
            width: 225/7.5vw;
            height: 225/7.5vw;
            border-radius: 6/7.5vw;
            overflow: hidden;
            margin-right: 16/7.5vw;
            margin-bottom: 16/7.5vw;
            &:nth-of-type(3n) {
              margin-right: 0;
            }
            > img {
              display: block;
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>